<template>
  <main>
    <div
      class="button"
      @mousedown="mouseDownEvent"
      @mouseup="mouseUpEvent"
      :style="{ borderColor: getColor(configStore.config.color, 0.5), opacity: configStore.config.opacity, backgroundColor: backgroundColor }"
    >
      <div class="count" :style="{ color: configStore.config.color }">
        {{ countStore.getCount() }}
      </div>
      <div
        class="max"
        :style="{
          color: configStore.config.color,
          borderTopColor: getColor(configStore.config.color, 0.6)
        }"
      >
        {{ configStore.config.max }}
      </div>
    </div>
    <div class="tag" :style="{ color: configStore.config.color }" v-show="showFlag">
      <img
        :src="configStore.getTagIcon().iconUrl"
        :style="{ filter: `drop-shadow(-95px 3px 0px ${configStore.config.color})` }"
        alt="water"
      />
      {{ configStore.getStepStr() }}
    </div>
  </main>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useCountStore } from '@renderer/stores/countStore'
import { useConfigStore } from '@renderer/stores/configStore'
import { getColor } from '@renderer/utils/colorUtils'

const countStore = useCountStore()
const configStore = useConfigStore()

// tap动画是否显示
let showFlag = ref(false)
onMounted(() => {
  // 监听tag动画结束事件
  const tag = document.querySelector('.tag')!
  tag.addEventListener('animationend', () => {
    showFlag.value = false
  })
  // 重置计数
  window.api.resetCount(() => {
    countStore.resetCount()
  })
  // 后退一步
  window.api.resetOneStep(() => {
    countStore.resetOneStep()
  })
  // 监听配置变化后获取持久化的配置信息
  window.api.mainSyncConfigStoreEvent(() => {
    // 调用 configStore 对象的 $hydrate 方法
    // $hydrate 方法通常用于在客户端应用中恢复或初始化 store 的状态
    // 这可能涉及到从本地存储、会话存储或服务器端获取数据来填充 store
    configStore.$hydrate()
  })

  countStore.saveBeforeCountInfo()

  // 创建定时器，每分钟执行一次
  setInterval(() => {
    // 判断当前时间是否是凌晨0点
    const now = new Date()
    if (now.getHours() === 0 && now.getMinutes() === 0) {
      countStore.saveYesterdayCountInfo()
    }
  }, 60000)
})

let backgroundColor = computed(() => {
  const color = configStore.getBackgroundColorByType()
  return color
})

// 鼠标点击标志
let mouseClickFlag = false
// 按下操作定时器
let timeout: ReturnType<typeof setTimeout> | null = null
// 鼠标按下事件
function mouseDownEvent(event: MouseEvent) {
  // 只允许鼠标左键按下
  if (event.button !== 0) return
  mouseClickFlag = true
  // 定时200毫秒
  timeout = setTimeout(() => {
    mouseClickFlag = false
  }, 200)
}
// 鼠标抬起事件
function mouseUpEvent(event: MouseEvent) {
  // 只允许鼠标左键抬起
  if (event.button !== 0) return
  if (timeout) clearTimeout(timeout)
  timeout = null
  if (mouseClickFlag) {
    // 执行点击事件
    mouseClickFlag = false
    showFlag.value = true
    countStore.addCount()
  }
}

</script>

<style scoped lang="scss">
main {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .button {
    margin: 0 auto;
    width: 80vw;
    height: 80vh;
    /* 圆形 */
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    // background-color: #fff;
    display: flex;
    // 居中竖着排列
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // 向四周扩散的阴影
    box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.1);

    .count {
      width: 60vw;
      height: 45vh;
      line-height: 45vh;
      text-align: center;
      font-size: 20px;
      opacity: 1;
      padding-top: 2px;
    }

    .max {
      width: 50vw;
      height: 25vh;
      line-height: 18vh;
      text-align: center;
      font-size: 10px;
      opacity: 0.6;
      padding-bottom: 4px;
      border-top-width: 2px;
      border-top-style: solid;
    }
  }

  .tag {
    position: absolute;
    top: 0;
    width: 40px;
    height: 20px;
    font-size: 10px;
    font-weight: bold;
    line-height: 20px;
    animation-duration: 0.5s;
    animation-name: addCounter;

    img {
      transform: translate(100px);
      width: 15px;
      height: 15px;
    }
  }
}

@keyframes addCounter {
  from {
    transform: translateY(15px);
    opacity: 0;
  }

  to {
    transform: translateY(-5px);
    opacity: 1;
  }
}
</style>
